<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello MUI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" href="css/mui.min.css">
  <link rel="stylesheet" href="css/app.css" />
</head>
<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">专题列表</h1>
  </header>
  <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
    <div class="mui-scroll">
      <div id="list">
      </div>
    </div>
  </div>
  <script type="text/template" id="tpl">
    <ul class="mui-table-view recom">
      <% _.each(list, function(v, i){ %>
        <li class="mui-table-view-cell" data-url="<%=v.url%>">
          <a href="javascript:;">
						<img src="<%=v.img%>" width="100%" />
						<p><%=v.title%></p>
					</a>
        </li>
    		<% }) %>
    </ul>
  </script>
  <script src="js/mui.min.js"></script>
  <script src="js/zepto.min.js"></script>
  <script src="js/underscore.js"></script>
  <script src="js/common.js"></script>
  <script>
  var w;
  var tplRender = _.template($("#tpl").html());
  mui.init({
    swipeBack: true,
    pullRefresh: {
      container: '#pullrefresh',
      down: {
        callback: pulldownRefresh
      }
    }
  });

  mui.plusReady(function() {
	  	w = Common.showWaiting();
		pulldownRefresh();
  });

  function pulldownRefresh() {
    $.ajax({
      url: Common.api + '/topics',
      async: true,
      cache: false,
      method: 'get',
      dataType: 'json',
      data: {},
      success: function(data) {
      		console.log(data);
      		Common.closeWaiting(w);
        var obj = {list: data};
        $("#list").html(tplRender(obj));
        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
        //必须在页面渲染好了再注册tap事件，否则不生效
        $(".recom").on("tap", "li", function() {
          var url = Common.domain + $(this).attr("data-url");
          var title = $(this).text();
          Common.open("topic-detail.html", "topic-detail.html", {
            url: encodeURIComponent(url),
            title: title
          });
        });
      }
    });
  }
  </script>
</body>
</html>
